import React,{Component} from 'react';
import {Breadcrumb,Button,notification,Select} from 'antd';
import service from '../lib/service';
import data1 from '../img/data1.png';
import data2 from '../img/data2.png';
const Option = Select.Option;

const points = [];
for(let i = 0; i <= 1; i++){
    points.push(<Option key={i}>{i}</Option>)
}

export default class StrongLine extends Component{
    state={
        n:0, 
        results:[]
    }

    getImage(){
        return this.state.n === 0? <img src={data1} alt="强联通分量数据1"/>:<img src={data2} alt="强联通分量数据2"/>
    }

    handleCalculation(){
        let n = this.state.n;
        let params = {n:parseInt(n,0)};
        service.strongLine(params).then((res)=>{
            notification.success({
                key: '计算成功',
                message: "结果已显示",
                description: '请查看..'
            });
            console.log(res.data)
            this.setState({results:res.data});
        }).catch((res)=>{
            console.log(res);
            // notification.error({
            //     key: 'error',
            //     message: '计算错误',
            //     description: res
            // });
        })
    }

    handleChangeN(e){
        let n = parseInt(e,0)
        this.setState({n:n})
    }

    render(){
        const image = this.getImage();

        return(
            <div style={{ background: '#fff', padding: 24, minHeight: 663 ,border:"1px solid #ececec"}}>
              <Breadcrumb style={{ margin: '16px 0' }}>
                  <Breadcrumb.Item>遍历算法</Breadcrumb.Item>
                  <Breadcrumb.Item>强联通分量</Breadcrumb.Item>
              </Breadcrumb>
              <div className="main">
                <div className="problem-describe">
                    <h1>问题描述</h1>
                    <p className="problem-describe-text">判定一个有向图是否存在强连通分量，并且给出所有的强联通分量。请参考教材深度优先遍历一节后的习题说明。</p>                   
                </div>
                <div className="problem-reflection">
                    <h1>算法分析</h1>
                    <p className="problem-describe-text">求解强联通分量需要两次深度优先遍历，第一次深度优先遍历是获取死端节点序列，第二次深度优先遍历即可获取所有的强联通分量</p>
                </div>
                <div className="problem-solution">
                    <h1>解决方案</h1>
                    <p className="problem-describe-text">输入测试值</p>
                    <div className="calculation">
                    <div>{image}</div>
                        选择数据:<Select 
                            style={{ width: '200px' ,marginRight:'10px'}}
                            defaultValue='0'
                            placeholder="Please select"
                            onChange={(e)=>this.handleChangeN(e)}
                            >{points}</Select> 
                        <Button style={{marginLeft:'20px'}} onClick={this.handleCalculation.bind(this)}>计算结果</Button>
                    </div> 
                    <div className="result">
                        <p>强联通分量为</p>
                        <div>{this.state.results.map((res)=>{
                            return <div>{res}</div>
                        })}</div>
                    </div>
                </div>
              </div>
            </div>
        )
    }
}